<template>
  <div class="screen" id="screen">
    <i class="iconfont" :class="!isfull ? 'icon-quanping' : 'icon-quxiaoquanping'" @click="handlescreen"></i>
  </div>
</template>

<script>
import { defineComponent, ref, onBeforeUnmount } from 'vue'
import screenfull from 'screenfull'
export default defineComponent({
  setup() {
    const isfull = ref(screenfull.isFullscreen)
    const handlescreen = () => {
      if (screenfull.isEnabled) {
        isfull.value = !isfull.value
        screenfull.toggle()
      } else {
        alert('你的浏览器不支持全屏')
      }
    }
    onBeforeUnmount(() => {
      screenfull.off('change')
    })
    return {
      handlescreen,
      isfull
    }
  }
})
</script>

<style lang="scss" scoped>
.icon-quanping,
.icon-quxiaoquanping {
  font-size: 32px;
  margin-right: 6px;
}
</style>
